<template>
	<view>


		<view class="shell">
			<view class="titleShell">
				<view class="titleNameShell">

					<view class="titleNameText">设备名：</view>
					<view class="titleName">{{info.device.deviceName}}</view>
				</view>
				<view class="titleNameShell">

					<view class="titleNameText">设备ID：</view>
					<view class="titleName">{{info.device.deviceCode}}</view>
				</view>

			</view>
			<view class="listShell">
				<block v-for="(item,index) in info.grids" :key="index">
					<view :class="(index>=0&&index<=3)?'bigItem':(index>=4&&index<=9)?'smallItem':'bigItem'"
						@click="clickHandle(item,index)">
						<block v-if="index>=0">
							<image class="goodsImg" :src="item.mainPicture"></image>
							<view class="goodsName">{{item.goodsName}}</view>
							<view class="stockNum">当前库存 <text class="redColor">{{item.stockName}}</text></view>
						</block>
						<block v-else>
							<image class="resGoodsImg" :src="item.mainPicture"></image>
							<view class="itemContent">{{item.goodsName}}</view>
						</block>
					</view>
				</block>
			</view>
		</view>

		<view class="bottomShell"></view>
		<view class="mask" v-if="isSetting" @click="clickMask">
			<view class="maskBottomShell">
				<view class="maskBigTitle"><text v-if="currentIndex<10">0</text> {{currentIndex +1}}号柜子</view>
				<view class="maskTitleText">当前商品</view>
				<view class="maskGoodsInfo">
					<image class="maskImg" :src="detail.mainPicture"></image>
					<view class="maskGoodsContent">
						<view class="maskGoodsNameShell">
							<view class="maskGoodsName">{{detail.goodsName}}</view>
							<view class="maskPrice">{{detail.sellingPrice}}</view>
						</view>
						<view class="invenNum">当前商品 <text class="redColor">{{detail.stockName}}</text> </view>
					</view>
				</view>
				<view class="maskButtonShell">
					<view class="maskButton" @click="selectHandle('1')">更换商品</view>
					<view class="maskButton" v-if="detail.goodsId && detail.stockName==0" @click="selectHandle('2')">补货
					</view>
					<view v-else class="maskButton grayBg">补货</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {

				},
				isSetting: false,
				currentIndex: -1,
				detail: {},
				gridData: {},
				deviceId: '',
				userId: ''
			}
		},
		onLoad(option) {
			this.deviceId = option.id
			this.userId = uni.getStorageSync('userData').user.customerId
			console.log(this.userId)
		},
		onShow() {
			this.getData(this.deviceId)
		},
		methods: {
			// 获取设备详情
			getData(id) {
				this.http({
					url: "/device/gridList",
					data: {
						deviceId: id,
					},
					method: "POST",
					success: res => {
						if (res.code == 200) {
							this.info = res.data

						}
					}
				})
			},
			// 点击格口
			clickHandle(item, index) {
				// console.log(item)
				// if(item.gridCode == '11' || item.gridCode == '12') return false
				this.$set(this, 'isSetting', true)
				this.currentIndex = index
				this.detail = item
				// console.log(this.detail)
			},
			// 点击蒙版
			clickMask() {
				this.$set(this, 'isSetting', false)
				// console.log(this.isSetting)
			},
			// 点击更换/补货
			selectHandle(type) {
				if (type == '1') {
					uni.navigateTo({
						url: "/pages/setRemined/selectGoods/selectGoods"
					})
					uni.setStorage({
						key: 'currentDevice',
						data: this.detail
					})
				} else {
					this.http({
						url: '/device/replenishment',
						data: {
							id: this.detail.id,
							userId: this.userId
						},
						method: "POST",
						success: res => {
							if (res.code == 200) {
								this.getData(this.deviceId)
								uni.showToast({
									title: '补货成功',
									duration: 1500
								})
							}
						}
					})
				}

			}
		},

	}
</script>

<style scoped>
	.bg {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.titleShell {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.titleNameShell {
		width: 50%;
		display: flex;
	}

	.titleName {
		width: 50%;
		overflow: hidden;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.titleNameText,
	.titleName,
	.deviceNum,
	.goodsName,
	.stockNum,
	.itemContent {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
	}


	.listShell {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		/* padding-bottom: 100rpx; */
	}

	.bigItem {
		width: 50%;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		border: 1px solid rgba(112, 112, 112, 0.16);
	}

	.smallItem {
		width: 33%;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		border: 1px solid rgba(112, 112, 112, 0.16);
	}

	.residusItem {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		border: 1px solid rgba(112, 112, 112, 0.16);
	}

	.goodsImg {
		width: 180rpx;
		height: 180rpx;
		display: block;
		margin: 0 auto;
	}

	.goodsName {
		width: 100%;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		margin-top: 10rpx;
	}

	.stockNum {
		margin-top: 30rpx;
	}

	.redColor {
		color: #E32929;
		margin-left: 10rpx;
	}

	.resGoodsImg {
		width: 180rpx;
		height: 180rpx;
		display: block;
	}

	.itemContent {
		width: 30%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bottomShell {
		/* width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 9999; */
	}

	.mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999;
	}

	.maskBottomShell {
		width: 100%;
		height: 50%;
		background-color: #FFFFFF;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		padding: 40rpx;
	}

	.maskBigTitle,
	.maskTitleText {
		text-align: center;
		font-family: Source Han Sans CN;
		color: rgba(0, 0, 0, 0.65);
	}

	.maskBigTitle {
		font-size: 32rpx;
		font-weight: 500;
	}

	.maskTitleText {
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 20rpx;
	}

	.maskGoodsInfo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.maskImg {
		width: 160rpx;
		height: 160rpx;
		display: block;
		border-radius: 10rpx;
	}

	.maskGoodsContent {
		width: 75%;
	}

	.maskGoodsNameShell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.maskGoodsName,
	.maskPrice,
	.invenNum {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
	}

	.maskGoodsName {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 400;
		color: #000000;
	}

	.maskPrice {
		font-weight: 500;
		color: #E32929;
	}

	.maskPrice::before {
		content: "￥";
		color: #E32929;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
	}

	.invenNum {
		font-weight: 400;
		color: rgba(0, 0, 0, 0.65);
		margin-top: 30rpx;
	}

	.maskButtonShell {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 100rpx;
	}

	.maskButton {
		width: 45%;
		text-align: center;
		padding: 15rpx 0;
		background-color: #E32929;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		border-radius: 4rpx;
	}

	.grayBg {
		background-color: #F5F5F5;
		color: #000000;
	}
</style>
